<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/templates/plantilla1.xhtml">

    <ui:define name="contenido">

        <h:form id="formBuscar">

            <h1> Buscar de Usuarios </h1>
            
            <p:panel id="buscarPanel" >
                
                <f:facet name="header">Filtros</f:facet>
                
                
                <table>
                    <!-- fila 1 y 2 -->
                    <tr>
                        <td>Email</td>
                        <td>
                            <p:inputText id="email"
                                         value="#{buscarUsuariosBean.filtro.email}"  >
                            
                                <p:ajax 
                                        event="blur"
                                        process="buscarPanel" 
                                        update="buscarPanel tablausuarios" 
                                        listener="#{buscarUsuariosBean.buscar()}"
                                        global="false"/>
                            
                            </p:inputText>
                        </td>
                        <td>Rut</td>
                        <td>
                            <p:inputText id="rut"
                                         value="#{buscarUsuariosBean.filtro.rut}"
                                         converter="rutConverter"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <p:message for="email" />
                        </td>
                        <td colspan="2">
                            <p:message for="rut" />
                        </td>
                    </tr>
                    
                    <!-- fila 3 y 4 -->
                    <tr>
                        <td>Perfil</td>
                        <td>
                            <p:selectOneMenu id="rol" 
                                             value="#{buscarUsuariosBean.filtro.perfil}"
                                             converter="entityConverter">
                                <f:selectItem itemLabel="Seleccionar..." />
                                <f:selectItems value="#{buscarUsuariosBean.perfilList}" 
                                               var="p" 
                                               itemLabel="#{p.nombre}" 
                                               itemValue="#{p}" />
                                
                                <p:ajax process="buscarPanel" 
                                        update="buscarPanel tablausuarios" 
                                        listener="#{buscarUsuariosBean.buscar()}"
                                        global="false"/>
                                
                            </p:selectOneMenu>
                        </td>
                        <td>F.Nac Desde</td>
                        <td>
                            <p:calendar id="fnacdesde" 
                                        value="#{buscarUsuariosBean.filtro.fechaNacDesde}" 
                                        readonlyInput="true"
                                        locale="es" 
                                        navigator="true" 
                                        pattern="dd/MM/yyyy" 
                                        yearRange="-100:+0" 
                                        showOn="button"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <p:message for="rol" />
                        </td>
                        <td colspan="2">
                            <p:message for="fnacdesde" />
                        </td>
                    </tr>
                    
                    <!-- fila 5 y 6 -->
                    <tr>
                        <td>Estado</td>
                        <td>
                            <p:selectOneMenu id="estado" 
                                             value="#{buscarUsuariosBean.filtro.estado}" >
                                <f:selectItem itemLabel="Seleccionar..." />
                                <f:selectItem itemLabel="Activo" itemValue="#{true}" />
                                <f:selectItem itemLabel="Inactivo" itemValue="#{false}" />
                            </p:selectOneMenu>
                        </td>
                        <td>F.Nac Hasta</td>
                        <td>
                            <p:calendar id="fnachasta" 
                                        value="#{buscarUsuariosBean.filtro.fechaNacHasta}" 
                                        readonlyInput="true"
                                        locale="es" 
                                        navigator="true" 
                                        pattern="dd/MM/yyyy" 
                                        yearRange="-100:+0" 
                                        showOn="button"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <p:message for="estado" />
                        </td>
                        <td colspan="2">
                            <p:message for="fnachasta" />
                        </td>
                    </tr>
                    
                </table>
                
                <f:facet name="footer">
                    <p:commandButton id="btnBuscar" value="Buscar"
                                     onclick="alert('aqui va el js para limpiar tabla')"
                                     actionListener="#{buscarUsuariosBean.buscar}" 
                                     process="buscarPanel" 
                                     update="buscarPanel tablausuarios" />
                </f:facet>
                
            </p:panel>
            
            <br/>
            
            <p:dataTable id="tablausuarios" 
                         widgetVar="tablausuarioWV"
                         value="#{buscarUsuariosBean.usuarioList}" 
                         var="u"
                         paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
                         paginatorPosition="bottom" 
                         paginator="true" 
                         rows="2"
                         paginatorAlwaysVisible="true"
                         selection="#{buscarUsuariosBean.usuarioSelected}"
                         rowKey="#{u.idUsuario}"
                         >
                
                <p:ajax event="rowSelectRadio" 
                        process="@this" 
                        global="false"       
                        update="@this" />
                
                <f:facet name="header">
                    Usuarios
                </f:facet>
                
                <p:column  selectionMode="single" style="width: 10px"  />
                
                <p:column>
                    <f:facet name="header"><b>ID</b></f:facet>
                    #{u.idUsuario}
                </p:column>
            
                <p:column headerText="E-MAIL">
                    #{u.email}
                </p:column>
                
                <p:column headerText="PERFILES">
                    <p:dataList value="#{u.perfilList}" var="p"  >
                        #{p.nombre}
                    </p:dataList>
                </p:column>
                
                <p:column headerText="RUN" >
                    <h:outputText value="#{u.cliente.run}" converter="rutConverter" />
                </p:column>
                
                <p:column headerText="FEC NAC" >
                    <h:outputText value="#{u.cliente.fechaNacimiento}">
                        <f:convertDateTime pattern="dd/MM/yyyy" />
                    </h:outputText>
                </p:column>
                
                <p:column headerText="ESTADO">
                    #{u.activo?'ACTIVO':'INACTIVO'}
                </p:column>
            
                
                <f:facet name="footer">
                    <p:commandButton value="Nuevo" immediate="true" action="nuevo"  ajax="false" />
                    
                    <p:commandButton value="Editar" 
                                     immediate="true" 
                                     action="editar" 
                                     ajax="false"
                                     disabled="#{buscarUsuariosBean.usuarioSelected == null}"/>
                    
                    <p:commandButton value="Eliminar" 
                                     process="@this"
                                     update="tablausuarios"
                                     actionListener="#{buscarUsuariosBean.eliminar()}"
                                     disabled="#{buscarUsuariosBean.usuarioSelected == null}">
                        <p:confirm header="Confirmación" message="¿Esta seguro que desea eliminar?" icon="ui-icon-alert" />  
                    </p:commandButton>
                    
                    
                </f:facet>
                
            </p:dataTable>
            
            
            <div class="botonera">
                <p:commandButton value="Salir" ajax="false" action="salir"  />
            </div>
            
        </h:form>

    </ui:define>
</ui:composition>
